<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始页面用a标签来跳转 -->
          <!-- 
          <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a>

          注意，这里to的资源路径是 对应的路径更改的名字
          active-class 元素激活时候采用什么样式class

          不过你想要使用理由别名，这也必须加冒号，与加级别
        -->
          <router-link class="list-group-item" active-class="active" :to="{
            name:'aboutP'
          }">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--指定路由展示的位置-->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Banner from './components/Banner.vue'
/**
 * 我们这里将头部也定义为一个组件
 * 
 * 这里有一个新的概念
 * 
 * 我们在这个文件跳转的demo中，使用的About.vue与Home.vue都属于路由组件
 * 而我们定义的Banner是普通组件
 * 
 */
export default {
    name:"App",
    components:{
      Banner
    }
}
</script>

